<template>
	<div class="quota_config_container">
		<sw-set-frame class="set" type="11"></sw-set-frame>
		<sw-common-frame :loading="loading">
			<template slot="button">
				<h5>资源库</h5>
			</template>
			<template slot="query">
				<el-form size="small" inline>
					<el-form-item>
						<el-input placeholder="输入资源库名称" v-model="queryData.name" clearable style="width: 200px"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="handleQueryData()">搜索</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="table">
				<el-table size="medium" :data="libraryListData" stripe height="100%">
					<el-table-column label="库名称" prop="name" min-width="100"></el-table-column>
					<el-table-column label="创建人" prop="createName" width="150"></el-table-column>
					<el-table-column label="文件总量" prop="diskCount" width="120"></el-table-column>
					<el-table-column label="已使用空间/配额总量" min-width="200">
						<template slot-scope="{ row }">
							<el-progress :percentage="row.diskUseQuota | quotaPercentageFilter(row.diskQuota)" :show-text="false"></el-progress>
							<p class="size">{{ row.diskUseQuota | sizeFilter }}/{{ row.diskQuota | sizeFilter }}</p>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="60" align="center">
						<template slot-scope="{ row }">
							<el-button size="medium" type="text" icon="el-icon-setting" @click="handleConfigQuota(row)"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</template>
			<template slot="page">
				<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
			</template>
			<el-dialog title="库配额设置" :visible.sync="dialogVisible" width="480px">
				<el-form size="small" ref="form" class="disk_quota_info" :model="quotaData" :rules="quotaRules">
					<el-form-item label="库名称" label-width="85px">{{ quotaData.name }}</el-form-item>
					<el-form-item label="已使用空间/配额总量" label-width="175px">{{ quotaData.diskUseQuota | sizeFilter }}/{{ quotaData.diskQuota | sizeFilter }}</el-form-item>
					<el-form-item label="配置容量(MB)" prop="diskQuota" label-width="131px">
						<el-input-number v-model="quotaData.diskQuota" controls-position="right"></el-input-number>
						<span style="margin-left: 10px">MB</span>
					</el-form-item>
				</el-form>
				<template slot="footer">
					<el-button size="medium" @click="dialogVisible = false">取消</el-button>
					<el-button size="medium" type="primary" @click="handleUpdateQuota">确定</el-button>
				</template>
			</el-dialog>
		</sw-common-frame>
	</div>
</template>
<script>
import listMixins from '@/mixins/listMixins';
import { updateConfig } from '@/api/system/tbSysConfig';
import { getLibraryList, updateLibrary } from '@/api/data/tbNetDiskDir';
export default {
	mixins: [listMixins],
	data() {
		return {
			//表格
			dialogVisible: false,
			quotaData: {},
			quotaRules: {
				diskQuota: { required: true, message: '请输入配额', trigger: 'blur' }
			}
		};
	},
	filters: {
		quotaPercentageFilter(input, total) {
			let percentage = Math.round((input / total) * 10000) / 100;
			return !percentage ? 0 : percentage;
		}
	},
	computed: {
		listFunction() {
			return eval(getLibraryList);
		},
		requestParams() {
			let params = { ...this.queryData };
			params['libraryId'] = '-1';
			params['type'] = '1';
			return params;
		},
		libraryListData() {
			let size = 1024 * 1024;
			return this.tableData.map((item) => {
				let obj = { ...item };
				obj['diskUseQuota'] = Number(item.diskUseQuota);
				obj['diskQuota'] = Number(item.diskQuota || '0') * size;
				return obj;
			});
			return this.tableData;
		}
	},
	methods: {
		//查询数据
		handleQueryData() {
			this.queryData.page = 1;
			this.queryTableData();
		},

		//设置配额
		handleConfigQuota(data) {
			let size = 1024 * 1024;
			let params = { ...data };
			params['diskQuota'] = data.diskQuota / size;
			this.quotaData = { ...params };
			this.dialogVisible = true;
		},

		//更新资源库配额
		handleUpdateQuota() {
			this.$refs['form'].validate(async (valid) => {
				if (!valid) return false;
				this.updateQuotaRequest();
			});
		},

		//更新配额请求
		async updateQuotaRequest() {
			let params = { ...this.quotaData };
			let result = await updateLibrary(params).then((res) => res.data);
			if (result.code === '0') {
				this.queryTableData();
				this.dialogVisible = false;
				this.$message.success('修改资源库配额成功');
			}
		}
	}
};
</script>
<style scoped lang="scss">
.quota_config_container {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	.set {
		flex: none;
		flex-shrink: 0;
		border-bottom: solid 1px #ebeef5;
	}
}
.disk_quota_info::v-deep {
	flex: 1;
	.el-form-item {
		margin-bottom: 16px;
	}
}
</style>
